$(function () {
  var swiper = new Swiper(".swiper-container", {
    loop: true, // 循环模式选项
    autoplay: {
      delay: 1500,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: false,
    },
  });
  $(".footer .title .item")
    .not(".active")
    .on("click", function () {
      $(".footer .title .item").removeClass("active");
      $(this).addClass("active");
      let href = $(this).attr("data-href");
      location.href = href;
    });
  function renderData() {
    let goods_name = $.trim($("#keywords").val());
    $.pajax({
      url: "/api/goods.php",
      type: "get",
      dataType: "json",
      data: { goods_name: goods_name },
    }).then((res) => {
      if (res.code == 1) {
        let html = res.data
          .map((item) => {
            return `<div class="item" goods-id="${item.goods_id}">
                    <div class="goods-img">
                        <img class="lazy" data-original="${item.img}" alt="${item.goods_name}">
                    </div>
                    <div class="goods-name">${item.goods_name}</div>
                    <div class="goods-poster">${item.goods_poster}</div>
                    <div class="goods-pirce">
                        <span class="new-price"><i>&yen;</i>${item.goods_new_price}</span>
                        <span class="old-price"><i>&yen;</i>${item.goods_price}</span>
                    </div>
                    <div class="goods-type"><span class="type">${item.type}</span></div>
                </div>`;
          })
          .join("");
        $(".shoplist").html(html);
        $("img.lazy").lazyload({ effect: "fadeIn" });
      }
    });
  }
  renderData();

  $(".search-img").click(function () {
    renderData();
  });
  $(".content .shoplist").on("click", ".item", (e) => {
    let goods_id = $(e.target).attr("goods-id");
    if (goods_id) location.href = "../html/detail.html?goods_id=" + goods_id;
  });
});
